<template>
  <div ref="home" class="home">
    <div class="home-top">
      <i class="iconfont icon-quanping fullscreen" @click="toggleFullScreen" />
      <span class="home-top-title">不凡数据大屏</span>
      <span class="home-top-time">{{ time }}</span>
    </div>
    <div class="main">
      <div class="left">
        <div class="left-main">
          <div class="left-main-left">
            <div class="left-main-left-top">
              <div class="title">
                电商数据
                <span>Shell Data</span>
              </div>
              <div style="display:flex;justify-content:space-between;margin-top:10px;">
                <span>销售量</span>
                <span>万元</span>
              </div>
              <div class="money">{{ renderSale|formatSale }}</div>
              <div>完成百分比</div>
              <div id="progress" :percent="percent" class="progress">
                <div class="son" />
              </div>
            </div>
            <div class="left-main-left-bottom">
              <div class="title">
                热门搜索词
                <span>Top Search</span>
              </div>
              <wordCloud />
            </div>
          </div>
          <div class="left-main-right">
            <div class="left-main-right-top">
              <barEcharts
                v-if="orderBydayList.length!=0"
                :order-byday-list="orderBydayList"
                :order-return-byday-list="orderReturnBydayList"
              />
            </div>
            <div class="left-main-right-bottom">
              <div class="left-main-right-bottom-left">
                <mapEcharts />
              </div>
              <div class="left-main-right-bottom-right">
                <pieEcharts />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-top">
          <div class="title">
            热门搜索词
            <span>Top Search</span>
          </div>
          <div class="right-top-list">
            <div class="right-top-list-item">
              <div style="color:#8a5fef;" class="iconfont icon-dingdan-copy  right-top-list-item-icon" />
              <div class="right-top-list-item-text">
                <div class="right-top-list-item-text-title">85.6</div>
                <div class="right-top-list-item-text-desc">订单总数 （万）</div>
              </div>
            </div>
            <div class="right-top-list-item">
              <div style="color:#ea9502;" class="iconfont icon-dengpao  right-top-list-item-icon" />
              <div class="right-top-list-item-text">
                <div class="right-top-list-item-text-title">32.5</div>
                <div class="right-top-list-item-text-desc">销售总量（万元）</div>
              </div>
            </div>
            <div class="right-top-list-item">
              <div style="color:#e1433b;" class=" iconfont icon-shandian-copy right-top-list-item-icon" />
              <div class="right-top-list-item-text">
                <div class="right-top-list-item-text-title">92.6</div>
                <div class="right-top-list-item-text-desc">人均销量</div>
              </div>
            </div>
            <div class="right-top-list-item">
              <div style="color:#a3c948;" class="iconfont icon-shandian-copy  right-top-list-item-icon" />
              <div class="right-top-list-item-text">
                <div class="right-top-list-item-text-title">45</div>
                <div class="right-top-list-item-text-desc">近十分钟新增订单数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-bottom">
          <div class="title">
            大额订单
            <span>Super Orders</span>
          </div>
          <el-table :data="orderList" :border="false" class="table">
            <el-table-column
              prop="time"
              label="时间"
            />
            <el-table-column
              prop="title"
              label="物品"
            />
            <el-table-column
              prop="num"
              label="数量"
            />
            <el-table-column
              prop="money"
              label="金额"
            />
          </el-table>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wordCloud from './wordCloud.vue'
import barEcharts from './barEcharts.vue'
import pieEcharts from './pieEcharts.vue'
import mapEcharts from './mapEcharts.vue'
import { baseData as baseDataApi } from '@/api/auth/resource'
import screenfull from 'screenfull'
export default {
  name: 'Home',
  components: {
    wordCloud,
    barEcharts,
    pieEcharts,
    mapEcharts
  },
  filters: {
    // 格式化销量
    formatSale(sale) {
      var str = sale.toString()
      var res = ''
      for (var i = str.length - 1, j = 0; i >= 0; i--, j++) {
        res = str[i] + res
        if (j % 3 === 2) {
          res = ',' + res
        }
      }
      res = res[0] === ',' ? res.slice(1) : res
      return res
    }
  },
  data() {
    return {
      percent: 30,
      sale: 12010284,
      renderSale: 0,
      time: '',
      orderBydayList: [],
      orderReturnBydayList: [],
      orderList: [
        {
          time: '12-22',
          title: '物品1',
          num: 20,
          money: 926801
        },
        {
          time: '12-22',
          title: '物品2',
          num: 24,
          money: 926866
        },
        {
          time: '12-22',
          title: '物品3',
          num: 332,
          money: 521234
        },
        {
          time: '12-22',
          title: '物品4',
          num: 22,
          money: 944322
        },
        {
          time: '12-22',
          title: '物品5',
          num: 20,
          money: 926889
        },
        {
          time: '12-22',
          title: '物品6',
          num: 66,
          money: 925678
        },
        {
          time: '12-22',
          title: '物品7',
          num: 98,
          money: 926321
        },
        {
          time: '12-22',
          title: '物品8',
          num: 540,
          money: 987629
        },
        {
          time: '12-22',
          title: '物品9',
          num: 223,
          money: 965478
        },
        {
          time: '12-22',
          title: '物品10',
          num: 12,
          money: 9243501
        }
      ]
    }
  },
  created() {
    this.getInitData()
  },
  mounted() {
    this.dynamicSales(80)
    this.timeInit()
  },
  methods: {
    timeInit() {
      setInterval(() => {
        // var time=new Date()
        this.time = this.formatTime(new Date())
      }, 1000)
    },
    // 动态变化销售量
    dynamicSales(end) {
      this.renderSale = this.percent * this.sale
      var ele = document.getElementById('progress')
      var timer = setInterval(() => {
        this.percent++
        this.renderSale = (this.percent + 20) * this.sale
        if (this.percent === end) {
          clearInterval(timer)
        }
        ele.style.setProperty('--width', this.percent)
      }, 1000 / 60)
    },
    // 获取初始化数据
    getInitData() {
      baseDataApi().then(res => {
        const { message, success, data } = res
        if (success) {
          console.log(data)
          this.orderReturnBydayList = data.orderReturnBydayList
          this.orderBydayList = data.orderBydayList
        } else {
          this.$message.error(message)
        }
      })
    },
    // 格式化时间
    formatTime(t) {
      const format = 'Y-m-d h:i:s'
      const year = t.getFullYear()
      // 由于 getMonth 返回值会比正常月份小 1
      const month = t.getMonth() + 1
      const day = t.getDate()
      const hours = t.getHours()
      const minutes = t.getMinutes()
      const seconds = t.getSeconds()
      const hash = {
        Y: year,
        m: month,
        d: day,
        h: hours,
        i: minutes,
        s: seconds
      }
      return format.replace(/\w/g, o => {
        return hash[o]
      })
    },
    // 切换全屏
    toggleFullScreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle(this.$refs.home)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table__row:hover > td {
    background-color: #0a1631 !important;
}

::v-deep .el-table__row--striped:hover > td {
    background-color: #fafafa !important;
}

::v-deep .el-table{
  background-color: #0a1631 !important;
}
::v-deep .table{
  margin-top:10px;
  color:#95a3cf;
  border:1px solid #263459;
  background-color: #0a1631;
  td,th{
    background-color: #0a1631;
    border-color: #263459;
  }
}
.home {
  position: relative;
  width: 100%;
  height: calc(100vh + 100px);
  padding-bottom: 100px;
  background-color: #0a1631;
  .main {
    display: flex;
    width: 100%;
    height: 100%;
    .left {
      width: 75%;
      height: 100%;
      color: #909ec9;

      &-main {
        display: flex;
        width: 100%;
        height: 100%;
        &-left {
          width: 40%;
          height: 100%;
          padding: 10px;
          &-bottom {
            transform: translateY(60px);
            width: 100%;
            height: 400px;
          }
          &-top {
            .title {
              font-size: 25px;
              line-height: 40px;
              span {
                color: #313d59;
              }
            }
            .progress {
              position: relative;
              width: 80%;
              height: 15px;
              margin: 40px auto;
              border-radius: 7.5px;
              background-color: #283052;
              &::before {
                display: block;
                content: attr(percent) "%";
                position: absolute;
                top: -25px;
                transform: translateX(-50%);
                color: #fff;
                font-size: 20px;
                left: calc(var(--width) * 1%);
              }
              &::after {
                position: absolute;
                top: 10px;
                left: calc(var(--width) * 1%);
                transform: translateX(-50%);
                content: "";
                display: block;
                border: 10px solid transparent;
                border-bottom: 10px solid #fff;
              }
              .son {
                position: absolute;
                left: 0;
                top: 0;
                display: inline-block;
                content: "";
                width: calc(var(--width) * 1%);
                height: 100%;
                border-radius: 7.5px;
                background: linear-gradient(to right, #24cbff, #8a0cff);
              }
            }
            .money {
              margin-top: 10px;
              margin-bottom: 10px;
              text-align: center;
              color: #fff;
              font-size: 40px;
              font-weight: 700;
              letter-spacing: 10px;
            }
          }
        }
        &-right {
          width: 60%;
          height: 100%;

          &-bottom {
            display: flex;
            width: 100%;
            // height: 100%;
            &-left {
              width: 100%;
              height: 100%;
            }
            &-right {
              width: 50%;
              height: 100%;
            }
          }
        }
      }
    }
    .right {
      width: 25%;
      height: 100%;
      &-top{
        &-list{
          display: flex;
          flex-wrap: wrap;
          &-item{
            display: flex;
            align-items: center;
            width: 50%;
            height: 75px;
            margin-bottom: 15px;
            &-icon{
              font-size: 25px;
              width: 40px;
              height:40px;
              line-height: 40px;
              text-align:center;
              border-radius: 50%;
              background-color: #0f2349;
            }
            &-text{
              text-align: center;
              &-title{
                font-size: 30px;
                letter-spacing: 4px;
                color: #fff;
              }
              &-desc{
                color:#abbcf3;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
  .fullscreen {
    position: absolute;
    top: -30px;
    left: 15px;
    font-size: 25px;
    color: #9aa8d4;
  }
  &-top {
    position: relative;
    text-align: center;
    width: 100%;
    line-height: 122px;
    height: 122px;
    color: #fff;
    font-size: 35px;
    background: url("http://zhujinlong.gitee.io/leju_shop_admin/static/img/titleBG.a4cdf1b6.png")
      center no-repeat;
    background-size: 75% 100%;
    &-time {
      position: absolute;
      top: -28px;
      right: 20px;
      font-size: 26px;
      background-color: transparent;
    }
    &-title {
      font-weight: 700;
      text-shadow: 1px 1px 15px #fff;
    }
  }
}
.title {
  color:#6d9ec9;
  font-size: 25px;
  line-height: 40px;
  span {
    color: #313d59;
  }
}
</style>
